<template>
  <div class="not-single archive wide" id='not-app-article'>
    <main class="site-main" role="main">
      <header class="page-header">
        <h1 class="post-title uppercase">{{ t('menu.archives') }}</h1>
        <div class='taxonomy-des'>
          <p>和时间交手，也和时间交朋友。</p>
        </div>
      </header>
      <article class="page">
        <div id='archives'>
          <div class='al' v-for="archive in archives"
               :key="t(`settings.months[${archive.time.split('-')[1]}]`) + '-' + archive.time.split('-')[0]">
            <ul class="al_mon_list">
              <li class="fade-before fade-after period">
                <h2 class="al_mon">{{ archive.time.split('-')[0] }}年{{ archive.time.split('-')[1] }}月</h2>
                <ul class='al_post_list'>
                  <template v-for="article in archive.articles" :key="article.id">
                    <li class='fade-before fade-after'>
                      <span class='post-day'>{{ String(new Date(article.createTime).getDate()).padStart(2,'0')  }}</span>
                      <a :href="ArticlePath.Path + article.id">{{ article.articleTitle }}</a>
                    </li>
                  </template>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </article>
    </main>
    <Paginator
      :pageSize="pagination.size"
      :pageTotal="pagination.total"
      :page="pagination.current"
      @pageChange="pageChangeHanlder" />
  </div>
</template>

<script lang="ts">
import { useArticleStore } from '@/stores/article'
import { useCommonStore } from '@/stores/common'
import { defineComponent, onMounted, onUnmounted, reactive, toRef } from 'vue'
import { useI18n } from 'vue-i18n'
import Breadcrumb from '@/components/Breadcrumb.vue'
import Paginator from '@/components/Paginator.vue'
import api from '@/api/api'
import markdownToHtml from '@/utils/markdown'
import { ArticlePath } from '@/models/@types'

export default defineComponent({
  name: 'Archives',
  computed: {
    ArticlePath() {
      return ArticlePath
    }
  },
  components: { Breadcrumb, Paginator },
  setup() {
    const commonStore = useCommonStore()
    const articleStore = useArticleStore()
    const { t } = useI18n()
    const pagination = reactive({
      current: 1,
      total: 0,
      size: 24
    })
    onMounted(() => {
      toPageTop()
      fetchArchives()
    })
    onUnmounted(() => {
      commonStore.resetHeaderImage()
    })
    const fetchArchives = () => {
      articleStore.archives = ''
      api
        .getAllArchives({
          current: pagination.current,
          size: pagination.size
        })
        .then(({ data }) => {
          articleStore.archives = data.data.records
          pagination.total = data.data.count
        })
    }
    const pageChangeHanlder = (current: number) => {
      pagination.current = current
      toPageTop()
      fetchArchives()
    }
    const toPageTop = () => {
      window.scrollTo({
        top: 0
      })
    }
    return {
      pageChangeHanlder,
      pagination,
      archives: toRef(articleStore.$state, 'archives'),
      t
    }
  }
})
</script>

<style lang="scss" scoped>
article.page {
  padding-top: 1.5rem;
}
#archives {
  display: grid;
  gap: var(--gap-area);
}
.al_mon_list {
  display: grid;
  gap: var(--gap-area);
  list-style: none;
  margin: 0;
  font-family: var(--top-font-family);
}
.al_mon {
  font-size: 2.25rem;
  line-height: 1;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px hsl(var(--font-color-hsl) / .2);
  -webkit-mask: linear-gradient(#000 80%,#0000 80%);
  margin: -0.3rem 0;
}
.al_post_list {
  margin: 0 calc(100vh / 4) 0 0;
  background: var(--w-bg, rgb(255 255 255 / .7));
  box-shadow: var(--box-shadow-white);
  border-radius: var(--radius);
  padding: var(--gap-divs);
}
.al_post_list li {
  display: flex;
  align-items: center;
  margin: 0;
  gap: var(--gap-divs);
  content-visibility: auto;
  contain-intrinsic-size: 2rem;
}
.al_post_list li span {
  opacity: .3;
  font-size: .75rem;
  flex: none;
  font-variant: tabular-nums;
}
.al_post_list .post-day {
  font-size: 1.5rem;
  color: var(--color);
  margin: 0 -0.5rem 0 0;
}
.al_post_list .post-day:after {
  content: "日";
  font-size: .75rem;
  margin: 0 0.75em;
  vertical-align: middle;
}
.al_post_list li a {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

@media (max-width: 641px) {
  .al_post_list {
    margin: 0;
  }
}
</style>
